<template>
  <div class="tab2" style="margin-top: 30px; margin-left: 27%">
    <i style="font-weight: 700; color: red">*</i>数据资产表字段添加:
    <a-table :columns="columns" :data-source="tableData.daFieldDTO" bordered :pagination="false">
      <template #headerCell="{ column }">
        <template v-if="['dafEnName', 'dafChName', 'dafExplain', 'dcCode'].includes(column.dataIndex)">
          <span>
            <smile-outlined />
            {{ column.title }}
          </span>
        </template>
      </template>

      <template #bodyCell="{ column, text, record }">
        <template v-if="['dafEnName', 'dafChName', 'dafExplain'].includes(column.dataIndex)">
          <a-input v-if="editableData[record.key]" v-model:value="editableData[record.key][column.dataIndex]" style="margin: -5px 0" />
          <template v-else>
            {{ text }}
          </template>
        </template>

        <template v-else-if="['dcCode'].includes(column.dataIndex)">
          <a-select
            v-if="editableData[record.key]"
            v-model:value="editableData[record.key][column.dataIndex]"
            show-search
            placeholder="Select a person"
            style="width: 100%"
            :options="options"
            :filter-option="filterOption"
            @focus="handleFocus"
            @blur="handleBlur"
            @change="handleChange"
          ></a-select>
          <template v-else>
            {{ text }}
          </template>
        </template>
        <template v-else-if="column.dataIndex === 'operation'">
          <div class="editable-row-operations">
            <span v-if="editableData[record.key]" class="save-cancel">
              <a-typography-link @click="save(record.key)"><a-button>保存</a-button></a-typography-link>
              <a-popconfirm title="确定取消吗?" @confirm="cancel(record.key)">
                <a-button>取消</a-button>
              </a-popconfirm>
            </span>
            <span v-else>
              <a-button type="primary" style="margin-left: 20%" @click="edit(record.key)">编辑</a-button>
            </span>
            <div class="delete">
              <a-popconfirm v-if="dataSource.length" title="确定取消吗？" @confirm="onDelete(record.key)">
                <a-button style="margin-left: 1%; text-align: center" type="primary">删除</a-button>
              </a-popconfirm>
            </div>
          </div>
        </template>
      </template>
    </a-table>
    <p>
      <a-button type="primary" @click="handleAdd">添加字段</a-button>
    </p>
  </div>
</template>

<script lang="ts" setup>
  import { ref, reactive } from 'vue';
  import type { UnwrapRef } from 'vue';
  import { cloneDeep } from 'lodash-es';
  import type { SelectProps } from 'ant-design-vue';
  import { daFieldDTOMessage } from '@/pages/CodeTables/specification';
  import { getDataAssetDetailHooks } from '@/hooks/DataAssetManagementHooks/getDataAssetDetailHooks';
  import { getStanardListHooks } from '@/hooks/CatalogDataStandardsHooks/getDataStandarsHooks';
  //引入hooks
  const { tableData } = getDataAssetDetailHooks();
  const { getData, table } = getStanardListHooks();

  const columns = [
    {
      title: '字段英文名称',
      dataIndex: 'dafEnName',
      width: '8%',
      key: 'dafEnName',
    },
    {
      title: '字段中文名称',
      dataIndex: 'dafChName',
      width: '8%',
      key: 'dafChName',
    },
    {
      title: '字段说明',
      dataIndex: 'dafExplain',
      width: '20%',
      key: 'dafExplain',
    },
    {
      title: '标准映射',
      dataIndex: 'dcCode',
      width: '20%',
      key: 'dcCode',
    },
    {
      title: '操作',
      dataIndex: 'operation',
      width: '15%',
      key: 'operation',
    },
  ];
  //添加
  const count = computed(() => dataSource.value.length + 1);
  const handleAdd = async () => {
    const newData = {
      key: `${count.value}`,
      dafEnName: ``,
      dafChName: ``,
      dafExplain: ``,
      dcCode: ``,
    };
    dataSource.value.push(newData);
    edit(newData.key);
    await getData();
  };

  const dataSource = ref(tableData.daFieldDTO);
  const editableData: UnwrapRef<Record<string, daFieldDTOMessage>> = reactive({});
  //编辑
  const edit = (key: string) => {
    editableData[key] = cloneDeep(dataSource.value.filter(item => key === item.key)[0]);
  };
  //保存
  const save = (key: string) => {
    Object.assign(dataSource.value.filter(item => key === item.key)[0], editableData[key]);
    delete editableData[key];
  };
  //取消保存
  const cancel = (key: string) => {
    delete editableData[key];
  };
  //删除
  const onDelete = (key: string) => {
    dataSource.value = dataSource.value.filter(item => item.key !== key);
  };
  //标准映射带搜索功能的选择器
  const options = ref<SelectProps['options']>([]);

  table.data.forEach((item: any) => {
    let optionDatas = {
      value: item.dcCode,
      label: `${item.dcCode}--${item.dcChName}--${item.dcEnName}`,
    };
    options.value?.push(optionDatas);
  });

  const handleChange = (value: string) => {
    console.log(`selected ${value}`);
  };
  const handleBlur = () => {
    console.log('blur');
  };
  const handleFocus = () => {
    console.log('focus');
  };
  const filterOption = (input: string, option: any) => {
    return option.value.toLowerCase().indexOf(input.toLowerCase()) >= 0;
  };
</script>

<style scoped>
  /* 下拉框 */
  .demo-dropdown-wrap :deep(.ant-dropdown-button) {
    margin-right: 8px;
    margin-bottom: 8px;
    width: 80%;
  }

  .editable-row-operations a {
    margin-right: 8px;
  }

  .delete {
    margin-top: -12%;
    margin-left: 60%;
  }

  .dynamic-delete-button {
    cursor: pointer;
    position: relative;
    top: 4px;
    font-size: 24px;
    color: #999;
    transition: all 0.3s;
  }

  .dynamic-delete-button:hover {
    color: #777;
  }

  .dynamic-delete-button[disabled] {
    cursor: not-allowed;
    opacity: 0.5;
  }
</style>
